<template>
  <el-form ref="queryFormRef" :inline="true" :model="formData" class="-mb-15px" label-width="68px">
    <slot name="default"></slot>

    <transition name="fade">
      <div v-if="showMoreOptions" class="more-options">
        <slot name="more"></slot>
      </div>
    </transition>
    <slot name="footer">
      <el-form-item>
        <el-button @click="childHandleQuery">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="childResetQuery">
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
        <el-button @click="toggleMoreOptions">{{ btnText }}</el-button>
      </el-form-item>
    </slot>
  </el-form>
</template>
<script lang="ts" setup>
import { computed } from 'vue'

/** 通用查询条件 **/
defineOptions({ name: 'CommonQueryFormBar' })

const queryFormRef = ref() // 搜索的表单
let showMoreOptions = ref(false) // 展示更多状态

const props = defineProps({
  modelValue: {
    type: Object,
    default: undefined
  },
  handleQuery: {
    type: Function,
    default: undefined
  },
  resetQuery: {
    type: Function,
    default: undefined
  }
})
const emit = defineEmits(['update:modelValue', 'query', 'reset'])

// 表单数据
const formData = computed({
  get() {
    return props.modelValue
  },
  set(value: any) {
    emit('update:modelValue', value)
  }
})

// 按钮文字
const btnText = computed(() => (showMoreOptions.value ? '收起更多' : '展开更多'))

// 控制展开
const toggleMoreOptions = () => {
  showMoreOptions.value = !showMoreOptions.value
}

/** 搜索按钮操作 */
const childHandleQuery = () => {
  // 调用父组件方法
  emit('query')
}

/** 重置按钮操作 */
const childResetQuery = () => {
  queryFormRef.value.resetFields()
  // 调用父组件方法
  emit('reset')
}
</script>
